<template>
  <div id="password-reset">
    <div class="container">
      <h2 class="title">修改密码</h2>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="current-password">当前密码:</label>
          <input
            type="password"
            id="current-password"
            class="form-control"
            v-model="currentPassword"
            required
          />
        </div>
        <div class="form-group">
          <label for="new-password">新密码:</label>
          <input
            type="password"
            id="new-password"
            class="form-control"
            v-model="newPassword"
            required
          />
        </div>
        <div class="form-group">
          <label for="confirm-password">确认新密码:</label>
          <input
            type="password"
            id="confirm-password"
            class="form-control"
            v-model="confirmPassword"
            required
          />
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
    }
  },
  methods: {
    handleSubmit() {
      if (this.newPassword !== this.confirmPassword) {
        alert('两次密码输入不一致！')
        return
      }
      // 在这里添加你的密码修改逻辑，例如通过 API 发送到后端服务器
      // ...
      alert('密码修改成功!')
    },
  },
}
</script>

<style scoped>
#password-reset {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使内容垂直居中 */
  background-color: #f5f5f5; /* 背景色 */
}

.container {
  width: 300px; /* 表单容器宽度 */
  padding: 20px;
  background-color: #fff; /* 表单背景色 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.title {
  text-align: center; /* 标题居中 */
  margin-bottom: 20px; /* 标题下方间距 */
}

.form-group {
  margin-bottom: 15px; /* 表单项下方间距 */
}

.form-group label {
  display: block; /* 标签独占一行 */
  margin-bottom: 5px; /* 标签下方间距 */
}

.form-control {
  width: 100%; /* 输入框宽度100% */
  padding: 10px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 5px; /* 圆角 */
  box-sizing: border-box; /* 盒模型 */
}

.btn {
  display: block; /* 按钮独占一行 */
  width: 100%; /* 按钮宽度100% */
  padding: 10px; /* 内边距 */
  background-color: #007bff; /* 背景色 */
  color: #fff; /* 文字颜色 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时变为小手 */
}

.btn:hover {
  background-color: #0056b3; /* 悬停时背景色变化 */
}
</style>
